<template>
  <view class="content">
    <!-- <view class="text-xl total_box">
      设备总数：<text style="color: red">
        {{ sum(arr.map((item) => item.count)) }}
      </text>
    </view> -->
    <view class="flex flex-wrap">
      <view
        class="home_item_box text-xl"
        v-for="(item, index) in arr"
        :key="index"
        :style="tipsArr[item.value].background"
        @click="
          jump(
            `/pages/searchResult/index?type=${query.type}&title=${item.title}&repairType=${item.value}`
          )
        "
      >
        <view class="title">{{ item.title }}</view>
        <view class="flex home_item_val justify-between align-center">
          <view class="operation_val_box text-l">
            <view v-if="tipsArr[index + 1] && tipsArr[index + 1].showNum">
              <text class="text-l">{{ tipsArr[index + 1].val }}</text>
              <text class="num_box">{{ item.count || 0 }}</text>
            </view>
            <view v-if="tipsArr[index + 1] && tipsArr[index + 1].showNum">
              <text class="text-l">{{ tipsArr[index + 1].valTwo }}</text>
              <text class="num_box">{{ item.completeCount || 0 }}</text>
            </view>
          </view>
          <view></view>
          <u-icon
            size="35"
            :name="tipsArr[item.value].icon"
            color="#fff"
          ></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
import { getCount } from "@/api/system/operation.js";
export default {
  data() {
    return {
      arr: [],
      tipsArr: [
        {},
        {
          showNum: true,
          title: "保养",
          val: "待保养",
          valTwo: "保养到期",
          icon: "/static/images/icon/by.png",
          background:
            "background-image:linear-gradient(-30deg,#7ab3fa 20%,#4896f8 60%);",
          type: 1,
        },
        {
          title: "报修",
          icon: "/static/images/icon/bx.png",
          background:
            "background-image:linear-gradient(-30deg,#fade7f 20%,#f7d047 60%);",
          type: 2,
        },
        {
          showNum: true,
          title: "维修",
          val: "待维修",
          valTwo: "已维修",
          icon: "/static/images/icon/wx.png",
          background:
            "background-image:linear-gradient(-30deg,#64ddf2 20%,#20cded 60%);",
          type: 3,
        },
        {
          title: "出借",
          val: "",
          icon: "/static/images/icon/cj.png",
          background:
            "background-image:linear-gradient(-30deg,#fba07d 20%,#f87847 60%);",
          type: 4,
        },
        {
          showNum: true,
          title: "归还",
          val: "待归还",
          valTwo: "已归还",
          icon: "/static/images/icon/gh.png",
          background:
            "background-image:linear-gradient(-30deg,#58e199 20%,#13d66e 60%);",
          type: 5,
        },
      ],
      query: null,
    };
  },
  onShow() {
    this.getCountFn();
  },
  onLoad: function (option) {
    if (option?.title) {
      this.query = option || {};
      uni.setNavigationBarTitle({ title: option.title });
    }
  },
  methods: {
    jump(url) {
      this.$tab.navigateTo(url);
    },
    sum(arr) {
      var s = 0;
      for (var i = arr.length - 1; i >= 0; i--) {
        s += arr[i];
      }
      return s;
    },
    getCountFn() {
      getCount({ type: this.query.type }).then((res) => {
        this.arr = res.result || [];
      });
    },
  },
};
</script>
  
  <style lang="scss">
page {
  background: #fff;
}
.total_box {
  text-align: center;
  color: #666;
  padding: 40upx;
}
.home_item_box {
  padding: 30upx;
  width: 43%;
  color: #fff;
  border-radius: 20upx;
  margin: 5% 0 0 5%;
  .title {
    font-weight: 700;
    font-size: 40upx;
  }
  .operation_val_box {
    font-size: 30upx;
    .num_box {
      border-radius: 50%;
      display: inline-block;
      width: 40upx;
      height: 40upx;
      text-align: center;
      line-height: 40upx;
      margin-left: 20upx;
      background: rgba($color: #000000, $alpha: 0.3);
    }
  }
  .home_item_val {
    margin: 20upx 0;
  }
}
</style>
  